<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content "></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content "></div>
        </el-col>
        <el-col :span="3">
            <div class="grid-content">
                <el-input
                        placeholder="请输入内容"
                        v-model="search"
                        clearable>
                </el-input>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content ">
                <el-button type="primary" icon="el-icon-search" @click="loadData">搜索</el-button>
                <el-button type="success" @click="BrandDialogFormVisible = true,brand={}">添加</el-button>
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="16">
            <div class="grid-content">
                <el-table
                        :data="dataList"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="品牌名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="图片">
                        <template slot-scope="scope">
                            <el-image
                                    style="width: 100px; height: 100px"
                                    :src="scope.row.img"
                                    fit="contain">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="seq"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="finById(scope.row.id)">修改</el-link>
                            <el-link type="danger" @click="delById(scope.row.id)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content"></div>
        </el-col>
    </el-row>
    <!--    添加brand-->
    <el-dialog title="保存品牌" :visible.sync="BrandDialogFormVisible">
        <el-form :model="brand">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                        class="avatar-uploader"
                        action="/upload/img"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imgurl" :src="imgurl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.seq" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="BrandDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            search: "",
            BrandDialogFormVisible: false,
            brand: {},
            currentPage:1,
            total:0,
            pagesize:10,
            imgurl:""
        },
        created() {
            this.loadData()
        },
        methods: {
            loadData() {
                axios.get(`/brand/list?name=${this.search}&pagesize=${this.pagesize}&page=${this.currentPage}`).then((res) => {
                    this.dataList = res.data.data.list
                    this.total = res.data.data.total
                }).catch(() => {
                    this.$message.error('数据加载失败，请刷新或联系管理员');
                })
            },
            save() {
                let id = this.brand.id
                let action = id ?"update":"save"
                console.log(action)
                axios.post(`/brand/${action}`, this.brand).then((res) => {
                    if (res.data.code == 200) {
                        this.$message.success('保存成功');
                        this.BrandDialogFormVisible = false
                        this.loadData()
                        return
                    }
                    this.$message.error('保存失败，请重试');
                })
            },
            delById(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/brand/delById/${id}`).then((res)=>{
                        if(res.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.loadData()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除!'
                    });
                })
            },
            finById(id){
                axios.get(`/brand/findById/${id}`).then((res)=>{
                    if(res.data.code==200){
                        this.$message({
                            type: 'success',
                            message: '查询成功!'
                        });
                        this.brand = res.data.data
                        this.imgurl = this.brand.img
                        this.BrandDialogFormVisible = true
                    }
                }).catch(()=>{
                    this.$message({
                        type: 'error',
                        message: '查询失败!'
                    });
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize = val
                this.loadData()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val
                this.loadData()
            },
            handleAvatarSuccess(res, file) {
                console.log(res)
                console.log(file)
                console.log(URL.createObjectURL(file.raw)) ;
                this.imgurl = res
                this.brand.img = this.imgurl
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    })
</script>
</html>